<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<title>Insert title here</title>
<link type="text/css" rel="stylesheet" href="<%=basePath%>/res/plugins/jtable/themes/metro/blue/jtable.css" />
<link type="text/css" rel="stylesheet" href="<%=basePath%>/res/css/jquery-ui-1.10.3.custom.css" />
<script type="text/javascript" src="<%=basePath%>/res/plugins/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/res/plugins/jquery-ui-1.10.0.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/res/plugins/jtable/jquery.jtable.js"></script>
</head>
<body>
	<div style="width: 80%; margin-right: 10%; margin-left: 10%; text-align: center;">
		<h4>AJAX based CRUD operations using jTable in J2EE</h4>
		<div id="StudentTableContainer"></div>
	</div>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		$('#StudentTableContainer').jtable({
			title : 'Students List',
            paging: true, //Enable paging
            pageSize: 10, //Set page size (default: 10)
			actions : {
				listAction : '<%=basePath%>/student/listStudentByPageAction',
				createAction: '<%=basePath%>/student/insertStudentAction',
				deleteAction: ''
			},
			fields : {
				studentId : {
					title : 'Student Id',
					width : '30%',
					key : true,
					list : true,
					edit : false,
					create : true
				},
				name : {
					title : 'Name',
					width : '30%',
					edit : true
				},
				department : {
					title : 'Department',
					width : '30%',
					edit : true
				},
				emailId : {
					title : 'Email',
					width : '20%',
					edit : true
				}
			}
		});
		$('#StudentTableContainer').jtable('load');
	});
</script>
</html>